<%--
  Created by IntelliJ IDEA.
  User: wang
  Date: 2022/12/17
  Time: 12:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
  <title>我的货架</title>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" />
<%--  <script src="js/jquery-3.6.1.min.js"></script>--%>
<%--  <script src="js/bootstrap.min.js"></script>--%>
  <style>
    #myInput {
      background-image: url('https://static.runoob.com/images/mix/searchicon.png'); /* 搜索按钮 */
      background-position: 10px 12px; /* 定位搜索按钮 */
      background-repeat: no-repeat; /* 不重复图片 */
      width: 100%;
      font-size: 16px;
      padding: 12px 20px 12px 40px;
      border: 1px solid #ddd;
      margin-bottom: 12px;
    }

    #myTable {
      border-collapse: collapse;
      width: 100%;
      border: 1px solid #ddd;
      font-size: 18px;
    }

    #myTable th, #myTable td {
      text-align: left;
      padding: 12px;
    }

    #myTable tr {
      /* 表格添加边框 */
      border-bottom: 1px solid #ddd;
    }

    #myTable tr.header, #myTable tr:hover {
      /* 表头及鼠标移动过 tr 时添加背景 */
      background-color: #f1f1f1;
    }
  </style>

</head>
<body>
<nav class="navbar navbar-default navbar-inverse">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button
              type="button"
              class="navbar-toggle collapsed"
              data-toggle="collapse"
              data-target="#bs-example-navbar-collapse-1"
              aria-expanded="false"
      >
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">校园易物平台系统</a>
      <%--      <a class="navbar-brand text-right">欢迎登陆${user.name}--%>
      <a class="navbar-brand text-right">欢迎登陆${user.username}

      </a>

    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">

        <%--        <li >--%>
        <%--          <a href="#">Link <span class="sr-only">(current)</span></a>--%>
        <%--        </li>--%>
        <li ><a href="${pageContext.request.contextPath}/UserGoodsListController">交易广场</a></li>
        <li class="active"><a href="${pageContext.request.contextPath}/UserSelfGoodsController">我的货架</a></li>
          <li><a href="${pageContext.request.contextPath}/index.jsp">退出</a></li>

          <li class="dropdown">
          <a
                  href="#"
                  class="dropdown-toggle"
                  data-toggle="dropdown"
                  role="button"
                  aria-haspopup="true"
                  aria-expanded="false"
          >Dropdown <span class="caret"></span
          ></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" action="${pageContext.request.contextPath}/UserSearchController">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search" name="option" />
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a
                  href="#"
                  class="dropdown-toggle"
                  data-toggle="dropdown"
                  role="button"
                  aria-haspopup="true"
                  aria-expanded="false"
          >Dropdown <span class="caret"></span
          ></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>

      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

<div class="container">
  <table class="table table-striped" >
    <caption>我的货架————所有商品</caption>
    <thead>
    <tr>
      <th>商品名称</th>
      <th>商品类型</th>
      <th>交易媒介</th>
      <th>交易方式</th>
    </tr>
    </thead>
    <tbody>

    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="搜索...">

    <table id="myTable">

      <c:forEach items="${userGoods}" var="good">
        <tr id="myTR">
          <td>${good.id}</td>
          <td>${good.goodname}</td>
          <td>${good.goodtype}</td>
          <td>${good.changemedium}</td>
          <td>${good.changeway}</td>
          <td>
            <a href="<c:url context="${pageContext.request.contextPath}" value="/DeleteUserGoodsController?id=${good.id}&goodname=${good.goodname}"/>" >下架商品</a>&nbsp;
            <a href="<c:url context='${pageContext.request.contextPath}' value='/ShowUserGoodsInfo?id=${good.id}'/>">修改商品信息</a>
          </td>
        </tr>

      </c:forEach>
    </table>

<%--    <c:forEach items="${userGoods}" var="good">--%>
<%--      <div class="col-lg-4">--%>
<%--        <div class="card popular text-center px-3 mb-4 z-depth-3">--%>
<%--          <div class="card-header">--%>
<%--            <div class="row align-items-center">--%>
<%--              <div class="col-8">--%>
<%--                <h4 class="heading h5 mb-0">${good.goodname}</h4>--%>
<%--              </div>--%>
<%--              <div class="col-4">--%>
<%--                <div class="card-icon-actions text-right">--%>
<%--                  <a href="#" class="favorite active" data-toggle="tooltip" data-original-title="收藏">--%>
<%--                    <i class="fas fa-star"></i></a>--%>
<%--                </div>--%>
<%--              </div>--%>
<%--            </div>--%>
<%--          </div>--%>
<%--          <div class="card-body">--%>
<%--            <ul class="list-inline mb-4">--%>
<%--              <li class="list-inline-item pr-2">--%>
<%--                <a href="#"><i class="fas fa-heart mr-1"></i> 12</a>--%>
<%--              </li>s--%>
<%--              <li class="list-inline-item">--%>
<%--                <i class="fas fa-eye text-muted mr-1"></i> 350--%>
<%--              </li>--%>
<%--            </ul>--%>
<%--            <div class="card border-0">--%>
<%--&lt;%&ndash;              <img class="rounded z-depth-3 img-fluid" src="assets/images/prv/img-1-800x600.jpg"&ndash;%&gt;--%>
<%--&lt;%&ndash;                   alt="Image description">&ndash;%&gt;--%>
<%--              <div class="pt-4">--%>
<%--                <h6 class="text-center">$499</h6>--%>
<%--              </div>--%>
<%--              <button type="button" class="btn btn-block btn-secondary" data-toggle="modal" data-target="#exampleModalLong">查看详情</button>--%>
<%--              <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">--%>
<%--                <div class="modal-dialog" role="document">--%>
<%--                  <div class="modal-content">--%>
<%--                    <div class="modal-header">--%>
<%--                      <h5 class="modal-title" id="exampleModalLongTitle">商品详情：</h5>--%>
<%--                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">--%>
<%--                        <span aria-hidden="true">&times;</span>--%>
<%--                      </button>--%>
<%--                    </div>--%>
<%--                    <div class="modal-body">--%>
<%--                      <b>商品名  </b> ${good.goodname}<br>--%>
<%--                      <b>商品类型  </b> ${good.goodtype}<br>--%>
<%--                      <b>交易媒介  </b> ${good.changemedium}<br>--%>
<%--                      <b>商品方式 </b> ${good.changeway}<br>--%>
<%--                    </div>--%>
<%--                    <div class="modal-footer">--%>
<%--                      <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>--%>
<%--                    </div>--%>
<%--                  </div>--%>
<%--                </div>--%>
<%--              </div>--%>

<%--            </div>--%>
<%--          </div>--%>
<%--          <div class="card-footer">--%>
<%--            <div class="row align-items-center">--%>
<%--              <div class="col">--%>
<%--                <span class="avatar avatar-sm bg-purple">AK</span>--%>
<%--                <span class="avatar-content"><a href="#">AKave</a></span>--%>
<%--              </div>--%>
<%--              <div class="col text-right text-xs-right">--%>
<%--                <ul class="list-inline mb-0">--%>
<%--                  <li class="list-inline-item pr-2">--%>
<%--                    2 小时 前--%>
<%--                  </li>--%>
<%--                </ul>--%>
<%--              </div>--%>
<%--            </div>--%>
<%--          </div>--%>
<%--        </div>--%>
<%--      </div>--%>
<%--    </c:forEach>--%>

    <!-- Core -->
    <script src="assets/vendor/jquery/jquery.min.js"></script>
    <script src="assets/vendor/popper/popper.min.js"></script>
    <script src="assets/js/bootstrap/bootstrap.min.js"></script>
    <!-- FontAwesome 5 -->
    <script src="assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>
    <!-- Page plugins -->
    <script src="assets/vendor/bootstrap-select/js/bootstrap-select.min.js"></script>
    <script src="assets/vendor/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>
    <script src="assets/vendor/input-mask/input-mask.min.js"></script>
    <script src="assets/vendor/nouislider/js/nouislider.min.js"></script>
    <script src="assets/vendor/textarea-autosize/textarea-autosize.min.js"></script>
    <!-- Theme JS -->
    <script src="assets/js/theme.js"></script>



    <script>
      function myFunction() {
        // 声明变量
        var input, filter, table, tr, td, i,j;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        table = document.getElementById("myTable");
        tr = table.getElementsByTagName("tr");

        // 循环表格每一行，查找匹配项
        for (i = 0; i < tr.length; i++) {
          td = tr[i].getElementsByTagName("td")[0];
          if (td) {
            if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
              tr[i].style.display = "";
            } else {
              td = tr[i].getElementsByTagName("td")[1];
              if (td) {
                if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                  tr[i].style.display = "";
                } else {
                  td = tr[i].getElementsByTagName("td")[2];
                  if (td) {
                    if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                      tr[i].style.display = "";
                    } else {
                      td = tr[i].getElementsByTagName("td")[3];
                      if (td) {
                        if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                          tr[i].style.display = "";
                        } else {
                          td = tr[i].getElementsByTagName("td")[4];
                          if (td) {
                            if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                              tr[i].style.display = "";
                            } else {
                              tr[i].style.display = "none";
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    </script>


    </tbody>
  </table>
  <nav aria-label="Page navigation">
    <ul class="pagination">

      <li>

        <c:if test="${page.pageIndex > 1}">
          <a href="<c:url context='${pageContext.request.contextPath}' value='/UserSelfGoodsController?pageIndex=${page.pageIndex -1}'/>" aria-label="Previous" >
            <span aria-hidden="true">&laquo;</span>
          </a>
        </c:if>
        <c:if test="${page.pageIndex == 1}">
          <a aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </c:if>
      </li>
      <li><a href="<c:url context='${pageContext.request.contextPath}' value='/UserSelfGoodsController?pageIndex=1'/>">首页</a></li>

      <li><a href="<c:url context='${pageContext.request.contextPath}' value='/UserSelfGoodsController?pageIndex=${page.totalPages}'/>">尾页</a></li>
      <li>

        <c:if test="${page.pageIndex < page.totalPages}">
          <a href="<c:url context='${pageContext.request.contextPath}' value='/UserSelfGoodsController?pageIndex=${page.pageIndex +1}'/>" aria-label="Previous">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </c:if>
        <c:if test="${page.pageIndex == page.totalPages}">
          <a  aria-label="Previous">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </c:if>
      </li>
    </ul>
  </nav>

  <p>
    <input type="button" value="增加商品" onclick="location='addGoods.jsp'">
  </p>
  </div>
</body>
</html>
